<template>
  <div class="friend-header"></div>
  <LayoutContentPanel>
    <template #content>
      <div style="display: flex; align-items: center; justify-content: center">
        <div style="margin-top: 60px;">
          <UserInfo :userProfile="userProfile" />
        </div>
      </div>
    </template>
  </LayoutContentPanel>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import UserInfo from "@/components/user/UserInfo.vue";
import { useRoute } from "vue-router";
import { getUserInfo } from "@/api/user";
import LayoutContentPanel from "../layout/LayoutContentPanel.vue";

const route = useRoute();

const userProfile = ref<any>({
  uid: 0,
  username: "",
  nickname: "",
  gender: 0,
  loginNumber: "",
  region: "",
  avatar: "",
  isCollected: false,
  remark: "",
  coGroupNumber: 2,
  signature: "",
  source: 1,
  contactStatus: 1,
});

watch(
  () => route.params.id,
  (uid) => {
    getUserProfile(uid);
  }
);

onMounted(() => {
  getUserProfile(route.params.id);
});

const getUserProfile = async (uid: any) => {
  const userInfoRes: any = await getUserInfo(uid);
  if (userInfoRes.errCode) {
    return;
  }

  userProfile.value = userInfoRes.data;
};
</script>

<style scoped lang="scss">
.friend-header {
  height: 60px;
  padding: 0px 0 12px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 25px;
}

.contact-container {
  // height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  // padding-top: 60px;

  .header {
    height: 60px;
    width: 100%;
  }

  .body {
    width: 100%;
    // height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 60px;
  }
}
</style>
